<script lang="ts" setup>
import replyIcon from "@/assets/icons/reply.png";
import editIcon from "@/assets/icons/edit.png";
import { useUserStore } from "@/store/modules/user";
import homeIcon from "@/assets/icons/home.png";
import deleteIcon from "@/assets/icons/delete.png";
import { reactive } from "vue";
const userStroe = useUserStore();
const emit = defineEmits(["comment", "reply", "deleteComment", "deleteReply"]);
interface IProps {
	comments: Record<string, any>[];
}

const props = defineProps<IProps>();

const pageData = reactive({
	showItemId: 0 as number,
	inputComment: "" as string,
	inputReply: "" as string,
	isShowBtn: true as boolean,
	userReply: {} as Record<string, any>,
});

// 点击回复，展示输入框
const showCommentInput = (
	curItem: Record<string, any>,
	reply?: Record<string, any>
) => {
	if (reply) {
		pageData.inputReply = "@" + reply.fromId + " ";
		pageData.userReply.toId = reply.fromId;
		pageData.userReply.toAvatar = reply.fromAvatar;
	} else {
		pageData.inputReply = "";
		pageData.userReply.toId = curItem.fromId;
		pageData.userReply.toAvatar = curItem.fromAvatar;
	}
	pageData.showItemId = curItem.id;
};
// 取消
const cancel = () => {
	pageData.showItemId = 0;
};

// 提交评论
const commitComment = () => {
	console.log(pageData.inputComment);
	if (pageData.inputComment.length !== 0) {
		emit("comment", pageData.inputComment);
		pageData.inputComment = "";
	} else {
		window.$message.warning("填写评论才能发表哦!");
	}
};

// 提交回复
const commitReply = () => {
	// 回复
	if (pageData.inputReply.length !== 0) {
		emit("reply", {
			inputReply: pageData.inputReply,
			id: pageData.showItemId, // 回复的父ID
			userReply: pageData.userReply,
		});
		pageData.inputReply = pageData.inputReply.includes("@")
			? pageData.inputReply.split(" ")[0] + " "
			: "";
	} else {
		window.$message.warning("填写评论才能发表哦!");
	}
};

// 按下取消按钮隐藏按钮
const cancelShowBtn = () => {
	pageData.isShowBtn = false;
};

// 输入框聚焦时展示按钮
const inputFocus = () => {
	pageData.isShowBtn = true;
};

// 删除评论
const deleteComment = (id: number) => {
	console.log(id);
	emit("deleteComment", id);
};

// 删除回复
const deleteReply = (id: number) => {
	console.log(id);
	emit("deleteReply", id);
};
</script>

<template>
	<div class="container">
		<div class="input-wrapper">
			<n-input
				class="gray-bg-input"
				v-model:value="pageData.inputComment"
				placeholder="写下你的评论"
				type="textarea"
				:autosize="{
					minRows: 3,
					maxRows: 5,
				}"
				@focus="inputFocus"
			/>
			<transition name="btnControl">
				<div class="btn-control" v-show="pageData.isShowBtn">
					<n-button
						strong
						secondary
						round
						class="cancel"
						@click="cancelShowBtn"
					>
						取消
					</n-button>
					<!-- <span  ></span> -->
					<n-button class="btn" type="success" round @click="commitComment"
						>确定</n-button
					>
				</div>
			</transition>
		</div>
		<div class="comment" v-for="item in props.comments" :key="item.id">
			<div class="info">
				<img
					class="avatar"
					:src="item.head ? item.head : homeIcon"
					width="30"
					height="30"
				/>
				<div class="right">
					<div class="name">{{ item.fromId }}</div>
					<div class="date">{{ item.date || item.DATE }}</div>
				</div>
			</div>
			<div class="content">{{ item.content }}</div>
			<div class="control">
				<span
					class="comment-reply"
					@click="showCommentInput(item)"
					v-if="userStroe.info.user_id !== item.fromId"
				>
					<img :src="replyIcon" alt="" class="iconfont icon-comment" />
					<span>回复</span>
				</span>
				<span
					class="comment-reply"
					@click="deleteComment(item.id)"
					v-if="item.fromId === userStroe.info.user_id"
				>
					<img :src="deleteIcon" alt="" class="iconfont icon-delete" />
					<span>删除</span>
				</span>
			</div>
			<div class="reply">
				<div class="item" v-for="reply in item.reply">
					<div class="reply-content">
						<span class="from-name">{{ reply.fromId }}</span
						><span>: </span>
						<span class="to-name">@{{ reply.toId }}</span>
						<span>{{ reply.content }}</span>
					</div>
					<div class="reply-bottom">
						<span>{{ reply.DATE }}</span>
						<span
							class="reply-text"
							@click="showCommentInput(item, reply)"
							v-if="reply.fromId !== userStroe.info.user_id"
						>
							<img :src="replyIcon" alt="" class="iconfont icon-comment" />
							<span>回复</span>
						</span>

						<span
							class="reply-text"
							@click="deleteReply(reply.id)"
							v-if="reply.fromId === userStroe.info.user_id"
						>
							<img :src="deleteIcon" alt="" class="iconfont icon-delete" />
							<span>删除</span>
						</span>
					</div>
				</div>

				<div class="write-reply" v-if="item.reply.length > 0">
					<img :src="editIcon" alt="" class="el-icon-edit" />
					<span class="add-comment" @click="showCommentInput(item)"
						>添加新评论</span
					>
				</div>
				<transition name="fade">
					<div class="input-wrapper" v-show="pageData.showItemId === item.id">
						<n-input
							class="gray-bg-input"
							v-model:value="pageData.inputReply"
							placeholder="写下你的评论"
							type="textarea"
							:autosize="{
								minRows: 3,
								maxRows: 5,
							}"
						/>

						<div class="btn-control">
							<n-button strong secondary round class="cancel" @click="cancel">
								取消
							</n-button>
							<!-- <span  ></span> -->
							<n-button class="btn" type="success" round @click="commitReply"
								>确定</n-button
							>
						</div>
					</div>
				</transition>
			</div>
		</div>
	</div>
</template>

<style lang="less" scoped>
@import "@/styles/mixin.less";

.container {
	padding: 0 10px;
	box-sizing: border-box;
	.comment {
		display: flex;
		flex-direction: column;
		padding: 10px;
		border-bottom: 1px solid #f2f6fc;
		.info {
			display: flex;
			align-items: center;
			.avatar {
				border-radius: 50%;
				background-color: #ccc;
			}
			.right {
				display: flex;
				flex-direction: column;
				margin-left: 10px;
				.name {
					font-size: 16px;
					color: #303133;
					margin-bottom: 5px;
					font-weight: 500;
				}
				.date {
					font-size: 12px;
					color: #909399;
				}
			}
		}
		.content {
			font-size: 16px;
			color: #303133;
			line-height: 20px;
			padding: 10px 0;
		}
		.control {
			display: flex;
			align-items: center;
			font-size: 14px;
			color: #909399;
			.like {
				display: flex;
				align-items: center;
				margin-right: 20px;
				cursor: pointer;
				&.active,
				&:hover {
					color: #409eff;
				}
				.iconfont {
					height: 24px;
					width: 24px;
					font-size: 14px;
					margin-right: 5px;
				}
			}
			.comment-reply {
				display: flex;
				align-items: center;
				cursor: pointer;
				&:hover {
					color: #333;
				}
				.iconfont {
					height: 24px;
					width: 24px;
					font-size: 16px;
					margin-right: 5px;
				}
				.icon-delete {
					width: 16px;
					height: 16px;
				}
			}
		}
		.reply {
			margin: 10px 0;
			border-left: 2px solid #dcdfe6;
			.item {
				margin: 0 10px;
				padding: 10px 0;
				border-bottom: 1px dashed #ebeef5;
				.reply-content {
					display: flex;
					align-items: center;
					font-size: 14px;
					color: #303133;
					.from-name {
						color: #409eff;
					}
					.to-name {
						color: #409eff;
						margin-left: 5px;
						margin-right: 5px;
					}
				}
				.reply-bottom {
					display: flex;
					align-items: center;
					margin-top: 6px;
					font-size: 12px;
					color: #909399;
					.reply-text {
						display: flex;
						align-items: center;
						margin-left: 10px;
						cursor: pointer;
						&:hover {
							color: #333;
						}
						.icon-comment {
							margin-right: 5px;
							width: 24px;
							height: 24px;
						}
						.icon-delete {
							margin-right: 5px;
							width: 16px;
							height: 16px;
						}
					}
				}
			}
			.write-reply {
				display: flex;
				align-items: center;

				padding: 10px;

				&:hover {
					color: #303133;
				}
				.el-icon-edit {
					height: 20px;
					width: 20px;
					margin-right: 5px;
				}
				.add-comment {
					font-size: 14px;
					color: #909399;
					cursor: pointer;
				}
			}
			// .fade-enter-active,
			// .fade-leave-active {
			// 	// transition: opacity 0.5s ease-in-out;
			//      transition: all 0.5s ease-in-out;
			// }
			// .fade-enter,
			// .fade-leave-to {
			// 	// opacity: 0;

			// }
			.fade-enter-active,
			.fade-leave-active {
				transition: all 0.5s;
			}
			.fade-enter,
			.fade-leave-to {
				opacity: 0;
				transform: translateY(-50px);
			}
			.fade-enter-to,
			.fade-leave {
				opacity: 1;
			}
		}
	}
	.input-wrapper {
		padding: 10px;

		.btn-control {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding-top: 10px;
			.cancel {
				margin-right: 20px;
			}
			.confirm {
				font-size: 16px;
			}
		}
		.btnControl-enter-active,
		.btnControl-leave-active {
			transition: all 0.5s;
		}
		.btnControl-enter,
		.btnControl-leave-to {
			opacity: 0;
			transform: translateY(-50px);
		}
		.btnControl-enter-to,
		.btnControl-leave {
			opacity: 1;
		}
	}
}
</style>
